<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <el-form :inline="true" class="form-inline">
        <el-form-item label="应聘者">
          <el-input v-model="name" />
        </el-form-item>

        <el-form-item label="岗位">
          <el-input v-model="post" />
        </el-form-item>

        <el-form-item label="应聘地点">
          <el-input v-model="address" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="select">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets" />
      <span>面试列表</span>

      <el-table
        ref="multipleTable"
        :data="tableData"
        :default-sort="{ prop: 'name', order: 'descending' }"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="编号" prop="id" sortable>
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column prop="applicant" label="应聘者" sortable />
        <el-table-column
          prop="post"
          label="应聘岗位"
          sortable
        />
        <el-table-column
          prop="start_time"
          label="面试开始时间"
          sortable
        />
        <el-table-column
          prop="end_time"
          label="面试结束时间"
          sortable
        />
        <el-table-column
          prop="address"
          label="面试地点"
          sortable
        />
        <el-table-column
          prop="interviewer"
          label="面试人"
          sortable
        />
        <el-table-column
          prop="result"
          label="面试结果"
          sortable
        />

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              @click="open(scope.row)"
            >面试结果</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button
          type="primary"
          @click="deliver()"
        >选择后，录用申请</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
// 传入面试列表
import { getInterviewList } from '@/api/recruit'
// 条件查询
import { getListByCondition } from '@/api/recruit'
// 通过面试修改
import { passInterview } from '@/api/recruit'

export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      // 查询名字
      name: null,
      // 查询岗位
      post: null,
      // 查询地点
      address: null
    }
  },
  created: function() {
    // 获取岗位信息
    getInterviewList().then((res) => {
      this.tableData = res.data

      for (const a of this.tableData) {
        // 时间格式转化
        const s = new Date(a.start_time)
        const e = new Date(a.end_time)
        a.start_time = s.toLocaleString()
        a.end_time = e.toLocaleString()
      }

      console.log(this.tableData)
    })
  },
  methods: {
    // 获取多选数据的数组
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 点击查询后，修改数据
    select() {
      const interview = {
        applicant: this.name,
        post: this.post,
        address: this.address
      }
      console.log(interview)

      getListByCondition(interview).then((res) => {
        this.tableData = res.data
      })
    },
    open(row) {
      this.$confirm('该应聘者是否通过面试?', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '通过',
        cancelButtonText: '未通过'
      })
        .then(() => {
          const pass = {
            'id': row.id,
            'result': '通过'
          }
          // 修改通过面试的状态
          passInterview(pass).then(() => {
          })

          this.$message({
            type: 'info',
            message: '修改成功'
          })
        })
        .catch((action) => {
          const pass = {
            'id': row.id,
            'result': '未通过'
          }
          if (action === 'cancel') {
            // 修改通过面试的状态
            passInterview(pass).then(() => {
            })
            this.$message({
              type: 'info',
              message: '修改成功'
            })
          } else {
            this.$message({
              type: 'info',
              message: '返回列表'
            })
          }
        })
    }
  }
}
</script>
